<template>
        <div class="wiper-ct">
            <div class="p-item" ref="swiperItem" :key="index"
              v-for="(item, index) in aInnerList"
              @touchstart="touchStart($event)" @touchmove="touchMove($event)"  @touchend="touchEnd($event)" :style="{backgroundImage: 'url('+ item[sInnerKey] +')'}">
              </div>
            <div class="p-circle">
              <div class="c-item" :class="{'sel': index == active}" :key="index" v-for="(item, index) in aInnerList" ></div>
            </div>
        </div>
</template>
<script>
export default {
  data () {
    return {
      aInnerList: [], // 内部图片列表
      sInnerKey: 'src',
      scrollDuration: '400ms', // 滑动持续时间
      startX: '',
      moveX: '',
      active: 0,
      off: true,
      autoplay: 2000,
      start: null,
      pause: false, // 是否暂停自动滚动，当手指滑屏的时候需要暂停
      iTime: 0 // 触摸时间时间
    }
  },
  props: ['picList', 'ukey'],
  mounted: function () {
    let _This = this
    _This.aInnerList = _This.picList || []
    _This.sInnerKey = _This.ukey || 'src'
    _This.$nextTick(() => {
      _This.backlate()
      _This.backtime()
      _This._autoplay()
    })
  },
  computed: {},
  methods: {
    // 图片移动
    backlate (offert) {
      let _This = this
      offert = offert || 0
      let aInnerList = _This.aInnerList
      aInnerList.forEach((item, index) => {
        let swiperItem = _This.$refs.swiperItem[index]
        if (swiperItem) {
          let transData = (index - _This.active) * swiperItem.clientWidth + offert
          swiperItem.style.transform = 'translate3d(' + transData + 'px,0,0)'
        }
      })
    },
    // 图片移动时间
    backtime (duration) {
      duration = duration || '0ms'
      this.$refs.swiperItem.forEach(item => {
        item.style.transition = duration
      })
    },
    touchStart (e) {
      this.pause = true
      let _This = this
      _This.moveX = 0
      _This.startX = e.touches[0].pageX
      let iCount = _This.aInnerList.length
      if (_This.active >= iCount || _This.active < 1) {
        return false
      }
      _This.cleartime()
    },
    touchMove (e) {
      e.preventDefault()
      e.stopPropagation()
      this.moveX = e.touches[0].pageX - this.startX
      this.backlate(this.moveX)
    },
    touchEnd (e) {
      let _This = this
      _This.backtime('300ms')
      var iCount = _This.aInnerList.length

      var active = this.active

      // 向左滑或者向右滑的判断
      if (_This.moveX > 50) {
        // 左滑
        active--
      } else if (_This.moveX < -50) {
        // 右滑
        active++
      } else {
        // 不动
      }

      if (active < 0) active = 0
      if (active === iCount) active = iCount - 1
      this.active = active
      this.backlate()
      this.pause = false
      this.cleartime()
      this._autoplay()
      if (Math.abs(_This.moveX) < 4) {
        let purl = _This.aInnerList[active][_This.sInnerKey]
        this.$emit('showImgPic', purl)
      }
    },
    // 循环滚动处理
    setactive (active) {
      let _This = this
      let iCount = _This.aInnerList.length
      if (active === -iCount) {
        _This.active = 0
      }
      this.backtime()
      setTimeout(() => {
        this.backlate()
      }, 3000)
    },
    next () {
      let _This = this
      _This.backtime('300ms')
      let iCount = _This.aInnerList.length
      _This.active++
      if (_This.active === iCount) {
        _This.active = 0
      }

      _This.backlate() // fix 图片底部圆点不对应
    //  _This.setactive(currentActivity);
    },
    _autoplay () {
      let _This = this
      if (_This.pause) return // 暂停状态
      if (_This.autoplay !== '') {
        _This.cleartime()
        _This.start = setTimeout(() => {
          if (_This.pause) return // 暂停状态
          _This.next()
          _This._autoplay()
        }, _This.autoplay)
      }
    },
    cleartime () {
      clearTimeout(this.start)
      this.start = null
    }
  }
}
</script>
<style lang="less">
.wiper-ct {
  width: 100%;
  height: 100%;
  position: relative;
  // background-color: #fafafa;
  .p-item {
    position: absolute;
    width: 100%;
    height: 100%;
    // background-size: 100%;
       background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
    // border-radius: 0.4rem;
  }
  .p-circle{
    position:absolute;
    width: 100%;
    bottom: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    .c-item{
      background:rgba(255, 255, 255,0.8);
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
      margin: 0 0.2rem;
    }
    .sel{
      background-color: #5DB600;
    }
  }

}
</style>
